<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-tag type="primary" v-if="form.gatewayGroup">网关分组[{{form.gatewayGroup | titleFilter(gatewayGroupList)}}]</el-tag>
                <span class="title">新增API</span>
            </div>
            <div style="margin: 15px">
                <h3>
                    <i class="el-icon-edit-outline"></i>
                    基础信息
                </h3>
            </div>
            <el-form :model="form" label-width="130px" :rules="rules" ref="form" :disabled="mode==='view'">
                <el-form-item label="网关分组：" prop="gatewayGroup" required>
                    <el-select v-model="form.gatewayGroup" placeholder="请选择" size="small">
                        <el-option v-for="item in gatewayGroupList" :key="item.groupId" :label="`${item.groupName}(${item.groupId})`" :value="item.groupId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="访问" prop="access" required>
                    <el-radio-group v-model="form.access">
                        <el-radio label="a">允许</el-radio>
                        <el-radio label="f">禁止</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否专线路由" required>
                    <el-radio-group v-model="form.isDedicatedLine">
                            <el-radio :label="0" disabled>否</el-radio>
                            <el-radio :label="1" disabled>是</el-radio>
                        </el-radio-group>
                </el-form-item>
                <el-form-item label="路由类型" required>
                    <el-radio-group v-model="form.proxyMode">
                        <el-radio :label="1">服务编排</el-radio>
                        <el-radio :label="2">服务发现</el-radio>
                        <el-radio :label="3">反向代理</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="form.proxyMode===3">
                    <el-row :gutter="20" v-for="(item,index) in form.apiBackends" :key="index">
                        <el-col :span="9">
                            <el-form-item :label="index===0?'后端服务器：':''" class="demo">
                                <el-input v-model="item.backendUrl" placeholder="请输入后端服务器IP/域名和端口，如：http://ip:port或http://domain:port" size="small"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label-width="0">
                                <el-button type="primary" icon="el-icon-plus" size="mini" @click="addServer" v-if="index===0"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle size="mini" v-if="index!==0" @click="removeServer(index)"></el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <div class="tips" style="margin-left: 130px">路由转发目标服务器，请填写后端服务器IP/域名和端口,如: http://ip:port 或 http://domain:port,有多台服务器时网关会轮询调用</div>
                </template>
                <el-tabs tabPosition="left" v-model="activeName" v-if="form.proxyMode===2">
                    <el-tab-pane label="HTTP" name="HTTP">
                        <el-form-item label="注册中心" required prop="registry">
                            <el-select v-model="form.registry" placeholder="网关分组" size="small">
                                <el-option v-for="item in registryList" :label="item" :key="item" :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="后端服务名" required>
                            <el-input v-model="form.service" placeholder="请选择后端服务名" size="small" style="width: 200px"></el-input>
                        </el-form-item>
                        <el-form-item label="后端API路径" required >
                            <el-input v-model="form.service" placeholder="请输入后端API路径" size="small"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                    <el-tab-pane label="Dubbo" name="Dubbo">
                        <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="后端服务名" required>
                                <el-input v-model="form.service" placeholder="请选择接口" size="small" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-form-item label-width="0">
                                <el-button type="primary" size="small" @click="handleChooseApi">选择接口</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label-width="0">
                                <el-button type="primary" size="small" plain @click="handleAddApi">新增接口</el-button>
                            </el-form-item>
                        </el-col>
                        </el-row>
                        <el-form-item label="方法名" required prop="method">
                            <el-input disabled size="small" v-model="form.method"></el-input>
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
                <el-form-item label="后端服务名" required prop="backendService">
                    <el-select v-model="form.backendService" placeholder="请选择服务名" size="small">
                        <el-option
                            v-for="item in serviceNameList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                    <div class="tips">路由转发目标服务</div>
                </el-form-item>
                <el-form-item label="后端API路径" required>
                    <el-row>
                        <el-col :span="18">
                            <el-input v-model="form.backendPath" placeholder="请输入后端API路径" size="small" clearable></el-input>
                            <div class="tips">
                                路由转发目标路径，支持精确匹配和引用前端API路径的变量(
                                    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
                                        <div slot="content">
                                            <h4>规则说明</h4>
                                            <div>API路径匹配规则说明：
                                                <br />
                                            </div>
                                        </div>
                                        <span style="color: #1840d3">规则说明</span>
                                    </el-tooltip>
                                ) ，如：/a/b/c 或 /a/b/{$1}
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="前端服务名" required>
                    <el-row>
                    <el-col :span="4">
                        <el-input v-model="form.service" placeholder="请输入服务名" size="small" :disabled="serviceChecked"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-checkbox style="margin-left: 15px" v-model="serviceChecked" @change="handleCheckChange">与后端服务名一致</el-checkbox>
                    </el-col>
                    </el-row>
                    <el-row>
                    <el-col :span="12">
                        <div class="tips">服务名为访问URL其中一级路径，建议与后端服务名一致</div>
                    </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="前端API路径" required>
                    <el-row :gutter="10">
                        <el-col :span="18">
                            <el-input v-model="form.path" placeholder="请输入后端API路径" size="small" clearable></el-input>
                            <div class="tips">
                                路由转发目标路径，支持精确匹配和引用前端API路径的变量(
                                    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
                                        <div slot="content">
                                            <h4>规则说明</h4>
                                            <div>API路径匹配规则说明：
                                                <br />
                                            </div>
                                        </div>
                                        <span style="color: #1840d3">规则说明</span>
                                    </el-tooltip>
                                ) ，如：/a/b/c 或 /a/b/{$1}
                            </div>
                        </el-col>
                        <el-col :span="2">
                            <el-button type="primary" plain size="small" @click="onTestClick">测试</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="调用方(appID)：" prop="appEnabled">
                    <el-checkbox v-model="form.appEnabled">启用</el-checkbox>
                    <div class="tips">
                    限制调用方访问，请求URL需在请求头中加应用授权 (示例) ，不启用不限制
                    </div>
                    <div v-if="form.appEnabled">
                        <el-button type="primary" plain size="mini" @click="handleAddApp">添加</el-button>
                        <el-table :data="tableData" ref="tableRef" size="mini" border style="width: 100%">
                            <el-table-column type="selection" prop="enabled" width="55"></el-table-column>
                            <el-table-column label="appID" prop="app">
                                <template slot-scope="scope">
                                    {{scope.row.appName}}({{scope.row.app}})
                                </template>
                            </el-table-column>
                            <el-table-column label="操作"  width="100">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>
                <el-form-item label="请求方法">
                     <el-select v-model="form.method" placeholder="请求方法" size="small">
                        <el-option v-for="item in methodList" :label="item" :key="item" :value="item"></el-option>
                     </el-select>
                </el-form-item>
                <el-form-item label="超时时间：" prop="timeout">
                    <el-input-number v-model="form.timeout" size="mini" controls-position="right" :min="1" :max="10"></el-input-number> &nbsp;&nbsp;毫秒
                    <div class="tips">默认超时时间为20秒</div>
                </el-form-item>
                <el-form-item label="失败重试：" prop="retryCount">
                    <el-input-number v-model="form.retryCount" size="mini" controls-position="right" :min="1" :max="10"></el-input-number> &nbsp;&nbsp;次
                </el-form-item>
                <el-form-item label="重试间隔：" prop="retryInterval">
                    <el-input-number v-model="form.retryInterval" size="mini" controls-position="right" :min="1" :max="10"></el-input-number> &nbsp;&nbsp;毫秒
                </el-form-item>
                <el-form-item label="路由结果：">
                    <span>//**转发至：http://zz</span>
                </el-form-item>
                <div class="info">
                    提示：网关访问地址格式为: http://{fizz网关ip:port}/proxy/{前端服务名}/{前端API路径}
                </div>
                <div style="margin: 15px">
                <h3>
                    <i class="el-icon-edit-outline"></i>
                    插件配置
                </h3>
            </div>
                <div>
                    <el-button type="primary" plain size="small" @click="addPlugin">添加插件</el-button> 
                    <!-- <el-collapse style="padding: 20px">
                        <el-collapse-item :name="item.id" v-for="(item,index) in addPluginList" :key="index" :disabled="!item.instruction">      
                        </el-collapse-item>
                    </el-collapse> -->
                    <plugin-form></plugin-form>

                </div>
                <div style="text-align: right" v-if="mode!=='view'">
                    <el-button type="primary" @click="handleSubmit('form')" size="small" icon="el-icon-search">保存</el-button>
                    <el-button @click="clear()" icon="el-icon-delete" size="small">取消</el-button>
                </div>
            </el-form>
        </el-card>
        <el-dialog
        title="路径测试"
        :visible.sync="testDialogVisible"
        width="50%"
        >
           <el-form>
             <el-form-item label="前端API路径:" :label-width="formLabelWidth">{{this.form.path}}</el-form-item>
             <el-form-item label="后端API路径:" :label-width="formLabelWidth">{{this.form.backendPath}}</el-form-item>
             <el-form-item label="API路径:" :label-width="formLabelWidth">
                 <el-row :gutter="20">
                   <el-col :span="18">
                       <el-input size="small" placeholder="请输入API路径" v-model="testAPI"></el-input>
                   </el-col>
                    <el-col :span="4">
                       <el-button type="primary" plain size="small" @click="handleTest" :disabled="testAPI===''">测试</el-button>
                   </el-col>
                 </el-row>
                 
             </el-form-item>
             <el-divider></el-divider>
             <el-form-item label="匹配结果:" :label-width="formLabelWidth">{{matchResult}}</el-form-item>
             <el-form-item label="后端API路径转换结果:" :label-width="formLabelWidth">{{patchResult}}</el-form-item>
             <el-form-item label="变量:" :label-width="formLabelWidth">{{variables}}</el-form-item>
           </el-form>
        </el-dialog>
         <el-drawer title="添加调用方(appID)" :visible.sync="appDrawer" size="50%" direction="rtl">
            <el-form label-width="100px" :model="appParams">
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="appID：" prop="app">
                        <el-input size="small" placeholder="appID" v-model="appParams.app"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="应用名：" prop="appName">
                        <el-input size="small" placeholder="应用名" v-model="appParams.appName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                    <el-form-item label="标签：" prop="tagCondition">
                        <el-input size="small" placeholder="appID" v-model="appParams.tagCondition"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-delete" size="small" @click="resetQuery">清空</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="appTableData" size="mini" border ref="appTable">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="appID" prop="app"></el-table-column>
            <el-table-column label="应用名" prop="appName"></el-table-column>
            <el-table-column label="标签" prop="tags">
                <template slot-scope="{row}">
                    {{row.tags.join(',')}}
                </template>            
            </el-table-column>
        </el-table>
         <el-pagination
                v-show="total>0"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                :current-page="1"
                :page-sizes="[10, 20, 30, 40,50,100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                class="pagination-container"
                :total="total">
        </el-pagination>
        <el-divider></el-divider>
        <div style="margin: 20px;text-align: right">
            <el-button type="primary" @click="addAppID()" size="small">确定</el-button>
            <el-button icon="el-icon-delete" size="small" @click="appDrawer=false">取消</el-button>
        </div>
        </el-drawer>
        <el-drawer title="添加插件" :visible.sync="drawer" size="50%" direction="rtl">
            <div>
                <div style="padding: 10px">
                    <el-checkbox v-model="checkedList" @change="handleCheckAllChange">全选</el-checkbox>
                </div>                                           
               <el-collapse style="padding: 20px">
                    <el-collapse-item :name="item.chnName" v-for="item in pluginList" :key="item.id" :disabled="!item.instruction">                     
                         <template slot="title">
                             <el-checkbox @change="handlePluginChange" v-model="item.checked">{{item.chnName}}</el-checkbox>
                             <template v-if="item.instruction">
                                 <el-tag style="margin: 0 10px" type="success" size="small">配置</el-tag>
                                 <el-tooltip class="item" effect="dark" :content="item.instruction" placement="top">
                                    <div>
                                        <i class="header-icon el-icon-info"></i>
                                        <el-button type="text">使用说明</el-button>
                                    </div>
                                 </el-tooltip>
                             </template>
                        </template>
                        <template v-if="item.chnName === 'Basic Auth校验'">
                            <div>
                                <div>账号配置</div>
                                 <el-input type="textarea" rows="3" size="small" disabled></el-input>
                                 <span> 账号配置的格式：{"userName1":"password","userName2":"123456"}，可配置多个账号，此账号为路由级别，当路由级别和插件级别有相同账号时以路由级别优先</span>
                            </div>
                        </template>
                         <template v-if="item.chnName === 'JWT校验'">
                             <el-form disabled>
                               <el-form-item label="密钥">
                                   <el-input type="textarea" rows="3" size="small"></el-input>
                                   <span>用于校验JWT的密钥，RS256/RS384/RS512/ES256/ES256K/ES384/ES512算法则填写公钥；为空则使用"插件管理->自定义配置"里的全局密钥。</span>
                               </el-form-item>
                                <el-form-item>
                                   <el-checkbox>提取JWT Claims到上下文</el-checkbox>
                                   <span>把Claims放到上下文的"jwt.claims"属性</span>
                               </el-form-item>
                                <el-form-item>
                                   <el-checkbox>透传JWT请求头到目标接口</el-checkbox>
                               </el-form-item>
                                <el-form-item label="HTTP状态码" required>
                                   <el-select value="" size="small">
                                     <el-option value="1"></el-option>
                                   </el-select>
                                    <span>校验失败时响应的HTTP状态码</span>
                               </el-form-item>
                               <el-form-item label="响应头content-type">
                                   <el-input size="small"></el-input>
                                   <span>校验失败时响应头的content-type</span>
                               </el-form-item>
                               <el-form-item label="响应报文">
                                   <el-input size="small"></el-input>
                                   <span>校验失败时响应报文,如：{"message":"invalid token"}</span>
                               </el-form-item>
                             </el-form>
                         </template>
                    </el-collapse-item>
                     <div style="text-align: right;margin-top: 10px;">
                        <el-button type="primary" @click="handleAddPlugin" size="small">添加</el-button>
                        <el-button @click="drawer = false" size="small">取消</el-button>
                    </div>
               </el-collapse>
            </div>
        </el-drawer>
        <!-- 新增Dubbo -->
        <el-dialog title="新增Dubbo接口" :visible.sync="dubboVisible" width="50%">
           <el-form :model="dubboForm" ref="dubboForm" label-width="120px" :rules="dubboRules">
               <el-row>
                 <el-col :span="10">
                    <el-form-item label="服务信息:" required prop="rpcServiceId">
                         <el-select v-model="dubboForm.rpcServiceId" placeholder="请选择服务" size="small">
                            <el-option v-for="item in RpcServiceList" :label="item.service" :key="item.id" :value="item.id"></el-option>
                          </el-select>
                    </el-form-item>
                 </el-col>
                 <el-col :span="2">
                     <el-button type="text" @click="handleAddService">新增服务</el-button>
                 </el-col>
               </el-row>
                <el-form-item label="接口名称" prop="name" required>
                    <el-input v-model="dubboForm.name" placeholder="请输入接口名称" size="small"></el-input>
                </el-form-item>
                <el-form-item label="方法名" prop="method" required>
                    <el-input v-model="dubboForm.method" placeholder="请输入方法名" size="small"></el-input>
                </el-form-item>
                 <el-form-item label="备注" prop="note">
                    <el-input v-model="dubboForm.note" size="small" type="textarea" :rows="3"></el-input>
                </el-form-item>
           </el-form>
           <span slot="footer" class="dialog-footer">
                <el-button @click="dubboVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleSaveDubbo('dubboForm')" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增RPC服务 -->
        <el-dialog title="新增RPC服务" :visible.sync="rpcServiceVisible" width="50%">
           <el-form :model="rpcForm" ref="rpcForm" label-width="120px" :rules="rpcRules">
                <el-form-item label="服务信息:" required prop="type">
                    <el-radio-group v-model="rpcForm.type">
                        <el-radio :label="1">Dubbo</el-radio>
                        <el-radio :label="2">gRPC</el-radio>
                        <el-radio :label="3">HTTP</el-radio>
                    </el-radio-group>
                    <div style="font-size: 10px;opacity: .7" v-if="rpcForm.type===3">只需填写不支持服务发现的HTTP服务</div>
                </el-form-item>
                <el-form-item label="服务名" prop="service" required>
                    <el-input v-model="rpcForm.service" placeholder="请输入服务名" size="small"></el-input>
                    <div style="font-size: 10px;opacity: .7">服务名可自定义, 网关会根据该名称来获取实例的IP和端口，如：OrderService; 保存后服务名不能修改</div>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="rpcForm.description" placeholder="请输入描述" size="small"></el-input>
                </el-form-item>
                 <el-form-item label="版本" prop="version" v-if="rpcForm.type===1">
                     <el-input v-model="rpcForm.version" placeholder="请输入描述" size="small"></el-input>
                     <div style="font-size: 10px;opacity: .7" v-if="rpcForm.type===1">Dubbo接口的版本号</div>
                </el-form-item>
                 <el-form-item label="分组" prop="group" v-if="rpcForm.type===1">
                     <el-input v-model="rpcForm.group" placeholder="请输入分组" size="small"></el-input>
                     <div style="font-size: 10px;opacity: .7" v-if="rpcForm.type===1">Dubbo接口分组</div>
                </el-form-item>
                <el-form-item label="实例列表" prop="instance" required v-if="rpcForm.type!==1">
                     <el-input v-model="rpcForm.instance" placeholder="如：10.2.3.114:8080或user.fizzgate.com:9090" size="small"></el-input>
                     <div style="font-size: 10px;opacity: .7">输入HTTP服务的实例IP:Port 或 域名:Port, 多个实例用逗号分隔</div>
                </el-form-item>
                <el-form-item label="负载均衡:" required prop="loadBalanceType" v-if="rpcForm.type!==1">
                    <el-radio-group v-model="rpcForm.loadBalanceType">
                        <el-radio :label="1">轮循</el-radio>
                        <el-radio :label="2">随机</el-radio>
                    </el-radio-group>
                </el-form-item>
           </el-form>
           <span slot="footer" class="dialog-footer">
                <el-button @click="rpcServiceVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="handleSaveRpc('rpcForm')" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增Dubbo接口 -->
        <el-drawer title="添加Dubbo接口" :visible.sync="dubboDrawer" size="50%" direction="rtl">
            <el-form label-width="100px" :model="dubboParams" ref="dubboParams">
            <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="服务名：" prop="service">
                    <el-input size="small" placeholder="服务名" v-model="dubboParams.service"></el-input>
                  </el-form-item>
                </el-col>
               <el-col :span="12">
                 <el-form-item label="方法名：" prop="method">
                    <el-input size="small" placeholder="方法名" v-model="dubboParams.method"></el-input>
                 </el-form-item>
               </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="接口名称：" prop="name">
                    <el-input size="small" placeholder="接口名称" v-model="dubboParams.name"></el-input>
                  </el-form-item>
                </el-col>
               <el-col :span="12">
                 <el-form-item label="版本：" prop="version">
                    <el-input size="small" placeholder="版本" v-model="dubboParams.version"></el-input>
                 </el-form-item>
               </el-col>
            </el-row>
             <el-row :gutter="10">
                <el-col :span="12">
                  <el-form-item label="分组：" prop="group">
                    <el-input size="small" placeholder="分组" v-model="dubboParams.group"></el-input>
                  </el-form-item>
                </el-col>
               <el-col :span="12">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleDubboQuery">搜索</el-button>
                        <el-button icon="el-icon-delete" size="small" @click="resetDubboQuery('dubboParams')">清空</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="dubboTableData" size="mini" border ref="dubboTableRef">
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="服务名" prop="service"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="方法" prop="method"></el-table-column>
            <el-table-column label="接口名称" prop="name"></el-table-column>
            <el-table-column label="版本" prop="version"></el-table-column>
            <el-table-column label="分组" prop="group"></el-table-column>
            <el-table-column label="参数类型" prop="paramTypes"></el-table-column>
            <el-table-column label="备注" prop="note"></el-table-column>
        </el-table>
         <el-pagination
                v-show="dubboTotal>0"
                @size-change="handleDubboSizeChange"
                @current-change="handleDubboCurrentChange"
                background
                :current-page="1"
                :page-sizes="[10, 20, 30, 40,50,100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                class="pagination-container"
                :total="dubboTotal">
        </el-pagination>
        <el-divider></el-divider>
        <div style="margin: 20px;text-align: right">
            <el-button type="primary" @click="addServiceClick" size="small">确定</el-button>
            <el-button icon="el-icon-delete" size="small" @click="appDrawer=false">取消</el-button>
        </div>
        </el-drawer>
    </div>
</template>

<script>
import { getServiceDict,getGroupeDict,patchUrl,getRpcServiceList,saveRpc,saveDubbo, geDubboData,geRegistryDict,saveProxy,getDetail } from '@/api/getway/gateway.api.js';
import { getPluginListAll } from '@/api/getway/group.api.js';
import { getAppIdList } from '@/api/callback/config.api.js';
import PluginForm from '../components/PluginForm.vue'
    export default {
        name: 'ProxyDetail',
        components: {
            PluginForm
        },
        data() {
            return {
                checkedList: [],
                form: {
                    appEnabled: false,
                    access: 'a',
                    discoveryMode: 1,
                    isDedicatedLine:0,
                    proxyMode:1,
                    backendPath:'/{$1}',
                    path: '/**',
                    apiBackends: [{backendUrl: ''}]
                },
                testDialogVisible: false,
                formLabelWidth: "150px",
                rules: {
                    gatewayGroup: [
                        { required: true, message: '请选择网关分组', trigger: 'blur'}
                    ],
                    backendService: [{required: true, message: '必填', trigger: 'blur'}]
                },
                // 后端服务名
                serviceNameList: [],
                gatewayGroupList: [],
                 tableOption: {
                    mutiSelect: true
                },
                appDrawer: false,
                addPluginList: [],
                appData: [],
                // 测试API路径
                testAPI: '',
                matchResult: '',
                patchResult: '',
                variables: '',
                tableData: [],
                mutiSelect: [],
                // 与后端服务名一直checked框
                serviceChecked: false,
                pluginList: [],
                drawer: false,
                // appID table
                appTableData: [],
                appParams: {
                    current: 1,
                    size: 10
                },
                total: 0,
                // 方法
                methodList: ['GET','POST','PUT','DELETE','PATCH','HEAD','OPTIONS','TRACE'],
                checkAll: false,
                // dubbo 接口弹窗
                dubboVisible: false,
                // RPC服务
                rpcServiceVisible: false,
                dubboForm: {},
                activeName: 'HTTP',
                RpcServiceList: [],
                // rpc服务表单
                rpcForm: {
                    type: 1,
                    loadBalanceType: 1,
                },
                rpcRules: {
                    service: [{ required: true, message: '服务名必填', trigger: 'blur' }],
                    instance: [{ required: true, message: '实例列表必填', trigger: 'blur' }],
                },
                dubboRules: {
                    rpcServiceId: [{ required: true, message: '服务信息必填', trigger: 'blur' }],
                    name: [{ required: true, message: '接口名称必填', trigger: 'blur' }],
                    method: [{ required: true, message: '方法名称必填', trigger: 'blur' }],
                },
                dubboParams: {
                    type: 1,
                    current: 1,
                    size: 10,
                },
                dubboDrawer: false,
                dubboTableData: [],
                dubboTotal: 0,
                registryList: [],
                // 默认为新增模式
                mode: 'add'
            }
        },
        async mounted() {
            const result = await getServiceDict();
            if(result.code === 200) {
                this.serviceNameList = result.data;
            }
            const result2 = await getGroupeDict();
            if(result2.code === 200) {
                this.gatewayGroupList = result2.data;
            }
            const rpcParams = {
                current: 1,
                size: 10,
                typesForCondition: '1,2'
            }
            const result3 = await getRpcServiceList(rpcParams);
            if(result3.code === 200) {
                this.RpcServiceList = result3.data.records;
            }
            const result4 = await geRegistryDict();
            if(result4.code === 200) {
                this.registryList = result4.data;
            }
            this.mode = this.$route.params.detail;
            if(this.mode === 'edit' || this.mode === 'view') {
                this.getDetailInfo();
            }
        },
        filters: {
            titleFilter(value,gatewayGroupList) {
                return gatewayGroupList.find(item=>item.groupId===value).groupName
            }
        },
        methods: {
             async getDetailInfo() {
                const originId = this.$route.query.originId;
                const result = await getDetail(originId);
                if(result.code === 200) {
                    this.form = result.data;
                }
             },
             addServiceClick() {
                 const value = this.$refs.dubboTableRef.selection;
                 if(value.length !== 1) {
                     this.$message.error('只能选择一条数据');
                     return;
                 }
                 this.form.service = value[0].service;
                 this.form.method = value[0].method;
                 this.dubboDrawer = false;
             },
              // 新增服务
              handleAddService() {
                  this.rpcServiceVisible = true;
              },
              handleAddApi() {
                this.dubboVisible = true;
              },
              handleChooseApi() {
                  this.dubboDrawer = true;
                  this.getDubboList();
              },
              async getDubboList() {
                 const result = await geDubboData(this.dubboParams);
                  if(result.code === 200) {
                      this.dubboTableData = result.data.records;
                      this.dubboTotal = result.data.total;
                  }  
              },
              // 保存Dubbo
              handleSaveDubbo(formName) {
                   this.$refs[formName].validate(async(valid) => {
                    if (valid) {
                        const result = await saveDubbo(this.dubboForm);
                        if(result.code === 200) {
                            this.$message.success('保存成功');
                            this.dubboVisible = false;
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
              },
              // 保存RPC
              handleSaveRpc(formName) {
                this.$refs[formName].validate(async(valid) => {
                    if (valid) {
                        const result = await saveRpc(this.rpcForm);
                        if(result.code === 200) {
                            this.$message.success('保存成功');
                            this.rpcServiceVisible = false;
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
              },
              handleAddPlugin() {
                  this.addPluginList.push(...this.pluginList.filter(item=>item.checked));
                  this.drawer = false;
              },
              handleCheckAllChange(val) {
                if(val) {
                    this.pluginList.forEach(item=>item.checked=true)
                }else {
                    this.pluginList.forEach(item=>item.checked=false)
                }
             },
            // 添加服务器
            addServer() {
                let data = {backendUrl: ''};
                this.form.apiBackends.push(data);
            },
            removeServer(index) {
                this.form.apiBackends.splice(index,1);
            },
            onTestClick() {
                this.testDialogVisible = true;
            },
            handlePluginChange(value) {
                
            },
            handleCheckChange(value) {
                // if(value) {
                //     this.form.service = this.form.backendService;
                // }
            },
            async handleTest() {
                const data = {
                   backendPath: this.form.backendPath,
                   frontendPath: this.form.path,
                   reqPath: this.testAPI
                }
                const result = await patchUrl(data);
                if(result.code === 200) {
                    if(result.data.match) {
                        this.matchResult = '匹配通过';
                        this.patchResult = result.data.result;
                        this.variables = result.data.variables;
                    }else {
                        this.matchResult = '匹配失败';
                    }
                }
            },
            async addPlugin() {
                this.drawer = true;
                const result = await getPluginListAll();
                if(result.code === 200) {
                    this.pluginList = result.data;
                }
            },
            handleSubmit(formName) {
                 this.$refs[formName].validate(async(valid) => {
                    if (valid) {
                        if(this.form.proxyMode!==3) {
                            delete this.form.apiBackends
                        }
                        const result = await saveProxy(this.form);
                        if(result.code === 200) {
                            this.$message.success('保存成功');
                            this.$router.push('/proxy/api');
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addAppID() {
                this.tableData = this.$refs.appTable.selection
                this.appDrawer = false;
            },
            handleDelete() {},
            handleAddApp() {
                this.appDrawer = true;
                this.getAppList();
            },
            async getAppList() {
                const result = await getAppIdList(this.appParams);
                if(result.code === 200) {
                    this.appTableData = result.data.records;
                    this.total = result.data.total
                }
            },
               // 搜索
            handleQuery() {
                this.queryParams.current = 1;
                this.getAppList();
            },
            // 清空
            resetQuery(formName) {
                this.$refs[formName].resetFields();
                this.getAppList();
            },
            handleSizeChange(val) {
                this.appParams.size = val;
                this.getAppList();
            },
            handleCurrentChange(val) {
                this.queryParams.current = val;
                this.getAppList();
            },
            // 搜索
            handleDubboQuery() {
                this.dubboParams.current = 1;
                this.getDubboList();
            },
            // 清空
            resetDubboQuery(formName) {
                this.$refs[formName].resetFields();
                this.getDubboList();
            },
            handleDubboSizeChange(val) {
                this.dubboParams.size = val;
                this.getDubboList();
            },
            handleDubboCurrentChange(val) {
                this.dubboParams.current = val;
                this.getDubboList();
            },
        }
    }
</script>

<style lang="scss" scoped>
.info {
    opacity: .7;
    font-size: 10px;
}
.title {
    margin-left: 10px;
    font-weight: 600;
    font-size: 16px;
}
.pagination-container {
    padding: 10px;
    text-align: right;
}
.demo {
    ::v-deep .el-form-item {
        margin-bottom: 1px;
    }
}
.tips {
    color: #999;
    font-size: 12px;
    line-height: normal;
    margin-top: 8px;
    display: block; 
}
</style>